import React, { useState } from 'react'
import { connect } from 'umi'
import { Card, Row, Col, Input, Button, Space, Form } from 'antd'
import style from "../index.less"

function SearchHeader(props: any) {
    const { dispatch } = props;
    const [form] = Form.useForm();
    const [pageInfo] = useState({ page: 1, pageSize: 12 });
    const onFinish = (values: any) => {
        // 搜索
        dispatch({ type: 'search/INIT', pageInfo:{
            ...pageInfo,
            ...values
        } })
    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    return (
        <Card>
            <Form
                form={form}
                name="basic"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 16 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Row>
                    <Col span={7}>
                        <Form.Item
                            label="类型"
                            name="type"
                        >
                            <Input placeholder='请输入搜索类型' />
                        </Form.Item>
                    </Col>
                    <Col span={7}>
                        <Form.Item
                            label="搜索词"
                            name="keyword"
                        >
                            <Input placeholder='请输入搜索词' />
                        </Form.Item>
                    </Col>
                    <Col span={7}>
                        <Form.Item
                            label="搜索量"
                            name="count"
                        >
                            <Input placeholder='请输入搜索量' />
                        </Form.Item>
                    </Col>
                </Row>
                <Row className={style.search}>
                    <Col span={5}>
                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Space>
                                <Button type="primary" htmlType="submit">
                                    搜索
                                </Button>
                                <Button onClick={()=>{
                                    form.resetFields()
                                }}>
                                    重置
                                </Button>
                            </Space>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </Card>
    );
}
// connect接收两个参数
// 1. 函数 mapStateToProps
const mapStateToProps = (state: any) => {
    const { search } = state
    return search
}
export default connect(mapStateToProps)(SearchHeader)